@-webkit-keyframes active_move_right {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
@-webkit-keyframes prev_move_right {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}
@-webkit-keyframes active_move_left {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}
@-webkit-keyframes next_move_left {
  from {
    left: 100%;
  }
  to {
    left: 0;
  }
}
.item {
  position: relative;
  display: none;
}
.item.active,
.item.next,
.item.prev {
  display: block;
  top: 0;
  width: 100%;
}
.item.active {
  display: block;
  top: 0;
}
.item.next,
.item.prev {
  position: absolute;
}
.item.next.left {
  -webkit-animation-name: next_move_left;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}
.item.prev.right {
  /*left: 0;*/

  -webkit-animation-name: prev_move_right;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}
.item.active.left {
  /*left: -100%;*/

  -webkit-animation-name: active_move_left;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}
.item.active.right {
  /*left: 100%;*/

  -webkit-animation-name: active_move_right;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
}
